@charset "utf-8";

@import "reset";

@function r($px){
    @return ($px/40)*1rem;
}
// 减半
@function half($px){
    @return ($px/2)*1px;
}

html,body{
    height: 100%;
    position: relative;
}
// 头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(48) half(19);
    box-sizing: border-box;
    .back{
        width: 59px;
        height: 26px;
        border: 2px solid #ff9344;
        line-height: 26px;
        text-align: center;
        border-radius: 25px;
        a{
            color: black;
            font-size: 21px;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .title{
        font-size: 18px;
        text-align: center;
    }
    .message{
        width: 40px;
        font-size: 0;
        img{
            width: 100%;
        }
    }
}

//主体
section{
    position: absolute;
    width: r(750);
    top: half(125);
    bottom: half(160);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-left: r(24);
    padding-right: r(24);
    .login{
        width: 100%;
        height: r(170);
        .lf{
            height: 100%;
            margin-right: r(24);
            img{
                width: r(168);
            }
        }
        .rg{
            height: 100%;
            line-height: r(170);
            img{
                width: r(40);
                display: inline-block;
            }
        }
        .pz{
            line-height: r(80);
            .wz30{
                a{
                    font-size: r(30);
                    color: black;
                }
            }
            .wz26{
                a{
                    font-size: r(26);
                    color: #9d9d9d; 
                }
            }
        }
    }
    .my{
        width: 100%;
        margin-top: r(28);
        margin-bottom: r(10);
        .dp{
            width: r(195);
            height: r(150);
            background: #b2e0a0;
            font-size: r(26);
            box-sizing: border-box;
            padding-top: r(20);
            text-align: center;
            img{
                width: r(77);
                margin: 0 auto;
                display: block;
                margin-bottom: r(8);
            }
        }
        .sc{
            width: r(195);
            height: r(150);
            background: #a0dce0;
            font-size: r(26);
            box-sizing: border-box;
            padding-top: r(20);
            text-align: center;
            margin-left: r(50);
            margin-right: r(50);
            img{
                width: r(83);
                margin: 0 auto;
                display: block;
                margin-bottom: r(8);
            }
        }
        .yhq{
            width: r(195);
            height: r(150);
            background: #e0b7a0;
            font-size: r(26);
            box-sizing: border-box;
            padding-top: r(20);
            text-align: center;
            img{
                width: r(124);
                margin: 0 auto;
                display: block;
                margin-bottom: r(8);
            }
        }
    }
    .gd{
        font-size: r(24);
        a{
            color: black;
        }
        img{
            width: r(25);
            vertical-align: middle;
        }
    }
    .option1{
        width: 100%;
        height: r(110);
        line-height: r(110);
        .purse{
            font-size: r(26);
            img{
                width: r(54);
                vertical-align: middle;
                margin-right: r(30);
            }
        }
    }
    .option2{
        width: 100%;
        height: r(110);
        line-height: r(110);
        .review{
            font-size: r(26);
            img{
                width: r(70);
                vertical-align: middle;
                margin-right: r(17);
            }
        }
    }
    .option3{
        width: 100%;
        height: r(110);
        line-height: r(110);
        .friend{
            font-size: r(26);
            img{
                width: r(85);
                vertical-align: middle;
            }
        }
    }
    .option4{
        width: 100%;
        height: r(110);
        line-height: r(110);
        .slot{
            font-size: r(26);
            img{
                width: r(60);
                vertical-align: middle;
                margin-right: r(24);
            }
        }
    }
   .option5{
       width: 100%;
       height: r(106);
       line-height: r(106);
       .set{
           font-size: r(26);
           img{
               width: r(80);
               vertical-align: middle;
               margin-right: r(5);
           }
       }
   }
   .option6{
       width: 100%;
       height: r(106);
       line-height: r(106);
       .contact{
           font-size: r(26);
           img{
               width: r(80);
               vertical-align: middle;
               margin-right: r(5);
           }
       }
   }
   .option7{
       width: 100%;
       height: r(106);
       box-sizing: border-box;
       padding-left: r(86);
       padding-right: r(86);
       div{
           margin-top: r(15);
           a{
               color: white;
               font-size: r(24);
           }
           width: r(145);
           height: r(75);
           line-height: r(68);
           background-color: #ff9344;
           text-align: center;
           border-radius: 25px;
       }
   }
}    


// 底部
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(750);
    height: half(135);
    li{
        width: 25%;
        text-align: center;
        .iconfont{
            font-size: 36px;
            color: white;
            -webkit-text-stroke: 1px #FF9344;
        }
        p{
            font-size: 13px;
            color: black;
        }
        .icon-myfill{
            color: #FF9344;
        }
    }
} 